<template>
  <div class="date">
    <v-row class="dateR">
      <v-menu
        ref="menu1"
        v-model="menu1"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="dateFormatted"
            placeholder="请先选择开始日期"
            label="选择开始日期"
            persistent-hint
            hint="选择开始日期从当日查询"
            prepend-icon="mdi-calendar"
            v-bind="attrs"
            @blur="date = parseDate(dateFormatted)"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="date1"
          no-title
          @input="menu1 = false"
          locale="zh-cn"
        ></v-date-picker>
      </v-menu>

      <v-menu
        v-model="menu2"
        :close-on-content-click="false"
        transition="scale-transition"
        offset-y
        max-width="290px"
        min-width="auto"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="computedDateFormatted"
            placeholder="请先选择开始日期"
            label="选择结束日期"
            :hint="danger"
            persistent-hint
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="date2"
          no-title
          @input="menu2 = false"
          locale="zh-cn"
        ></v-date-picker>
      </v-menu>
      <v-combobox
        class="box"
        v-model="select"
        :items="items"
        label="质检查询"
        outlined
        dense
        @change="changeItem(select)"
      ></v-combobox>
    </v-row>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
// import DocumentService from '@/services/document.service'
export default {
  data: () => ({
    dateFormatted: '',
    computedDateFormatted: '',
    date1: '',
    date2: '',
    danger: '',
    menu1: false,
    menu2: false,
    select: '',
    items: ['未质检', '已驳回', '已合格'],
    item: null,
    initSelect: null
  }),
  props: {
    searchReturnData: {
      type: String,
      default: ''
    }
  },
  computed: {},

  watch: {
    date1: {
      async handler(val) {
        this.dateFormatted = this.formatDate(val)
        if (this.date1) {
          this.danger = ''
        }
        // 判断date2 长度 判断选一个
        if (this.date2.length === 0 && this.date1.length !== 0) {
          await this.getQualityItems({
            projectId: this.$route.params.id,
            q: this.searchReturnData,
            limit: 10,
            offset: 0,
            startTime: val,
            endTime: '',
            qualityStatus: this.item
          })
        }
        if (this.date2.length !== 0) {
          await this.getQualityItems({
            projectId: this.$route.params.id,
            q: this.searchReturnData,
            limit: 10,
            offset: 0,
            startTime: val,
            endTime: this.date2,
            qualityStatus: this.item
          })
        }
        this.$emit('query', [this.date1, this.date2, this.item])
      },
      immediate: true
    },
    date2: {
      async handler(val, old) {
        this.$emit('query', [this.date1, this.date2, this.item])
        this.date2 = val
        if (this.date1.length === 0) {
          this.danger = '请先选择开始日期'
        }
        this.computedDateFormatted = this.formatDate(val)
        if (this.date1.length !== 0) {
          await this.getQualityItems({
            projectId: this.$route.params.id,
            q: this.searchReturnData,
            limit: 10,
            offset: 0,
            startTime: this.date1,
            endTime: val,
            qualityStatus: this.item
          })
        }
      }
    }
  },

  methods: {
    ...mapActions('documents', ['getQualityItems']),
    async changeItem(item) {
      this.item = this.items.indexOf(item)
      await this.getQualityItems({
        projectId: this.$route.params.id,
        startTime: this.date1,
        endTime: this.date2,
        qualityStatus: this.item,
        q: this.searchReturnData
      })
      this.$emit('query', [this.date1, this.date2, this.item, this.initSelect])
      // this.$emit('changeResult', [data.data.results, data.data.count])
      this.initSelect = this.item
    },
    formatDate(date) {
      if (!date) {
        return null
      }
      const [year, month, day] = date.split('-')
      return `${month}/${day}/${year}`
    },
    parseDate(date) {
      if (!date) {
        return null
      }
      const [month, day, year] = date.split('/')
      return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.date {
  transform: translateY(10px);
  margin-left: 30px;
}
.box {
  transform: translateY(10px);
  margin-left: 30px;
}
</style>
